<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<!--bind data-->
<div id="app-1">
    <div :class="{ active : isActive , 'text-danger' : hasError}" class="static"></div>
</div>
<script>
    let app1 = new Vue({
        el: '#app-1'
        , data: {
            isActive: true
            , hasError: false
        }
    })
</script>

<!--bind data object-->
<div id="app-2">
    <div :class="classObject"></div>
    <div :class="classComputed"></div>
</div>
<script>
    let app2 = new Vue({
        el: "#app-2"
        , data: {
            classObject: {
                active: false
                , 'text-danger': true
            }
            , isActive: true
            , hasDanger: {type: 'post'}
        }
        , computed: {
            classComputed() {
                return {
                    active: this.isActive && !this.hasDanger,
                    'text-danger': this.hasDanger && this.hasDanger.type === 'post',
                }
            }
        }
    })
</script>


<!--bind array-->
<div id="app-3">
    <div :class="[activeClass , errorClass]"></div>
</div>
<script>
    let app3 = new Vue({
        el: '#app-3'
        , data: {
            activeClass: 'active',
            errorClass: 'text-danger',
        }
    })
</script>

<!--component  this mode can not run-->
<div id="app-4">
    <my-component class="baz boo"></my-component>
    <component2></component2>
</div>
<script>
    new Vue({
        el: '#app-4'
        , components: {
            myComponent: Vue.component('my-component', {
                template: '<p class="foo bar bar"></p>'
            }),
            component2: Vue.component('component2', {template: '<p :class="{ active : isActive }"></p>'})
        }
        , data: {
            isActive: true,
        }
    })
</script>

<!--also can use to style-->
<div id="app-5">
    <div :style="{ color: activeColor , fontSize: fontSize +'px',transition:'all 1s' }"></div>
    <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
    <div :style="styleObject"></div>
    <div :style="[baseStyles, overridingStyles]"></div>
</div>
<script>
    new Vue({
        el: '#app-5'
        , data: {
            fontSize: 10
            , activeColor: 'red'
            , styleObject: {
                fontSize: '10px'
                , color: 'red'
            }
            , baseStyles: {fontSize: '10px', transition: 'all 1s'}
            , overridingStyles: {color: 'red'},
        }
    })
</script>
</body>
</html>